<template>
  <div>
    <div>{{ files }}</div>
    <div>
      <file-upload
        ref="uploader"
        v-model="files"
        post-action="http://192.168.130.37:8030/fastdfs-services/filenamager/uploadFileText"
        @input-file="inputFile"
        @input-filter="inputFilter"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </file-upload>
    </div>
    <div>
      <ul>
        <li v-for="(file, index) in files" :key="index" class="is-success">
          {{ file }}
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <i class="el-icon-close pointer" @click="handleRemove(index)"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
// post-action="http://192.168.130.37:8030/fastdfs-services/filenamager/uploadFileText"
const EVENT_REMOVE = 'remove'
const EVENT_SUCCESS = 'success'
const EVENT_CHANGE = 'change'
export default {
  name: 'Test',
  props: {
    fileList: {
      type: Array,
      default() {
        return []
      }
    },
    isCls: {
      type: Number,
      default: null
    },
    index: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      myHeaders: { authorization: getToken() },
      files: []
    }
  },
  computed: {
    uploadCls() {
      return `upload-demo${this.isCls}`
    }
  },
  methods: {
    inputFile(newFile, oldFile) {
      console.log(newFile)
      // console.log(JSON.stringify(newFile))
      // 上传完
      if (newFile && oldFile && !newFile.active && oldFile.active) {

        // 获得相应数据
        alert(JSON.stringify(newFile))
        if (newFile.xhr && newFile.xhr.status === 200) {
          // newFile.response.data.thumb = newFile.thumb // 把缩略图转移
          const file = {
            name: newFile.name,
            response: {
              url: JSON.parse(newFile.response).url
            }
          }
          alert(file.response.url)
          this.$emit(EVENT_SUCCESS, file, this.index)
          // this.value.push(newFile.response.data) // 把 uploader 里的文件赋值给 value
          // this.$refs.uploader.remove(newFile) // 删除当前文件对象
          // this.$emit('update:value', this.value) // 更新值
        }
      }
      // 自动上传
      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
        if (!this.$refs.uploader.active) {
          this.$refs.uploader.active = true
        }
      }
    },
    inputFilter(newFile, oldFile, prevent) {
    },
    handleRemove(index) {
      this.$refs.uploader.remove(this.files[index])
      this.$emit(EVENT_REMOVE)
    },
    handleSuccess(file) {
      console.log(file)
      this.$emit(EVENT_SUCCESS, file, this.index)
    },
    handleChange(file, fileList) {
      this.$emit(EVENT_CHANGE, fileList)
    }
  }
}
</script>

<style scoped>
  .el-icon-circle-check:before{
    content: "\E639"
  }
</style>
